<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入初始化样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入index样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入jQuery -->
    <script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
    <!-- 引入工具函数 -->
    <script type="text/javascript" src="js/utils.js"></script>
    <!-- 引入index文件-->
    <script type="text/javascript" src="js/index.js"></script>
    <!-- 引入detail文件-->
    <script type="text/javascript" src="js/detail.js"></script>
    <title>$funny</title>
</head>
<body>
<div id="wrapper">
    <!-- header -->
    <div id="header">
        <div class="inner">
            <!-- logo -->
            <div id="logo">
                <a href="javascript:;">
                    <img src="images/logo.gif"/>
                </a>
            </div>
            <!-- searchGoods -->
            <div id="search">
                <input id="search_goods" type="text" value="请输入商品名称"/>
            </div>
            <!-- theme -->
            <div id="theme">
                <ul>
                    <li title="蓝色" data-bg="#4A4A4A" data-bg1="#6E6E6E"></li>
                    <li title="紫色" data-bg="#BE46D8" data-bg1="#D49AE1"></li>
                    <li title="红色" data-bg="#E44072" data-bg1="#F296B2"></li>
                    <li title="天蓝色" data-bg="#37C7D4" data-bg1="#98E0E6"></li>
                    <li title="橙色" data-bg="#F9AF2A" data-bg1="#FFCF78"></li>
                    <li title="淡蓝色" data-bg="#B1D410" data-bg1="#CDE074"></li>
                </ul>
            </div>
            <!-- nav -->
            <div id="nav">
                <ul>
                    <li class="nav-item">
                        <a href="javascript:;">首页</a>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:;">品牌</a>
                        <div class="sub-nav">
                            <dl class="sub-nav-top">
                                <dt class="title">男装:</dt>
                                <dd class="content">
                                    <a href="javascript:;">耐克</a> |
                                    <a href="javascript:;">阿迪达斯</a> |
                                    <a href="javascript:;">达芙妮</a> |
                                    <a href="javascript:;">李宁</a> |
                                    <a href="javascript:;">安踏</a> |
                                    <a href="javascript:;">奥康</a> |
                                    <a href="javascript:;">骆驼</a> |
                                    <a href="javascript:;">特步</a> |
                                    <a href="javascript:;">耐克</a> |
                                    <a href="javascript:;">阿迪达斯</a> |
                                    <a href="javascript:;">骆驼</a> |
                                    <a href="javascript:;">特步</a> |
                                    <a href="javascript:;">阿迪达斯</a>
                                </dd>
                            </dl>
                            <dl class="sub-nav-bottom">
                                <dt class="title">女装:</dt>
                                <dd class="content">
                                    <a href="javascript:;">耐克</a> |
                                    <a href="javascript:;">阿迪达斯</a> |
                                    <a href="javascript:;">达芙妮</a> |
                                    <a href="javascript:;">李宁</a> |
                                    <a href="javascript:;">安踏</a> |
                                    <a href="javascript:;">奥康</a> |
                                    <a href="javascript:;">骆驼</a> |
                                    <a href="javascript:;">特步</a> |
                                    <a href="javascript:;">耐克</a> |
                                    <a href="javascript:;">阿迪达斯</a> |
                                    <a href="javascript:;">骆驼</a> |
                                    <a href="javascript:;">特步</a> |
                                    <a href="javascript:;">阿迪达斯</a>
                                </dd>
                            </dl>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:;">女装</a>
                        <div class="sub-nav">
                            <dl class="sub-nav-top">
                                <dt class="title">男装:</dt>
                                <dd class="content">
                                    <a href="javascript:;">耐克</a> |
                                    <a href="javascript:;">阿迪达斯</a> |
                                    <a href="javascript:;">达芙妮</a> |
                                    <a href="javascript:;">李宁</a> |
                                    <a href="javascript:;">安踏</a> |
                                    <a href="javascript:;">奥康</a> |
                                    <a href="javascript:;">骆驼</a> |
                                    <a href="javascript:;">特步</a> |
                                    <a href="javascript:;">耐克</a> |
                                    <a href="javascript:;">阿迪达斯</a> |
                                    <a href="javascript:;">骆驼</a> |
                                    <a href="javascript:;">特步</a> |
                                    <a href="javascript:;">阿迪达斯</a>
                                </dd>
                            </dl>
                            <dl class="sub-nav-bottom">
                                <dt class="title">女装:</dt>
                                <dd class="content">
                                    <a href="javascript:;">耐克</a> |
                                    <a href="javascript:;">阿迪达斯</a> |
                                    <a href="javascript:;">达芙妮</a> |
                                    <a href="javascript:;">李宁</a> |
                                    <a href="javascript:;">安踏</a> |
                                    <a href="javascript:;">奥康</a> |
                                    <a href="javascript:;">骆驼</a> |
                                    <a href="javascript:;">特步</a> |
                                    <a href="javascript:;">耐克</a> |
                                    <a href="javascript:;">阿迪达斯</a> |
                                    <a href="javascript:;">骆驼</a> |
                                    <a href="javascript:;">特步</a> |
                                    <a href="javascript:;">阿迪达斯</a>
                                </dd>
                            </dl>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:;">男装</a>
                        <div class="sub-nav">
                            <dl class="sub-nav-top">
                                <dt class="title">男装:</dt>
                                <dd class="content">
                                    <a href="javascript:;">耐克</a> |
                                    <a href="javascript:;">阿迪达斯</a> |
                                    <a href="javascript:;">达芙妮</a> |
                                    <a href="javascript:;">李宁</a> |
                                    <a href="javascript:;">安踏</a> |
                                    <a href="javascript:;">奥康</a> |
                                    <a href="javascript:;">骆驼</a> |
                                    <a href="javascript:;">特步</a> |
                                    <a href="javascript:;">耐克</a> |
                                    <a href="javascript:;">阿迪达斯</a> |
                                    <a href="javascript:;">骆驼</a> |
                                    <a href="javascript:;">特步</a> |
                                    <a href="javascript:;">阿迪达斯</a>
                                </dd>
                            </dl>
                            <dl class="sub-nav-bottom">
                                <dt class="title">女装:</dt>
                                <dd class="content">
                                    <a href="javascript:;">耐克</a> |
                                    <a href="javascript:;">阿迪达斯</a> |
                                    <a href="javascript:;">达芙妮</a> |
                                    <a href="javascript:;">李宁</a> |
                                    <a href="javascript:;">安踏</a> |
                                    <a href="javascript:;">奥康</a> |
                                    <a href="javascript:;">骆驼</a> |
                                    <a href="javascript:;">特步</a> |
                                    <a href="javascript:;">耐克</a> |
                                    <a href="javascript:;">阿迪达斯</a> |
                                    <a href="javascript:;">骆驼</a> |
                                    <a href="javascript:;">特步</a> |
                                    <a href="javascript:;">阿迪达斯</a>
                                </dd>
                            </dl>
                        </div>
                    </li>
                    <li class="nav-item"><a href="javascript:;">鞋包配饰</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- main -->
    <div id="main">
        <!-- categories -->
        <div id="categories">
            <h1 title="商品分类" class="title">商品分类</h1>
            <div class="content">
                <div class="category-item">
                    <h3 class="title">推荐品牌</h3>
                    <ul>
                        <li><a href="javascript:;">耐克</a></li>
                        <li><a href="javascript:;">阿迪达斯</a></li>
                        <li><a href="javascript:;">达芙妮</a></li>
                        <li><a href="javascript:;">李宁</a></li>
                        <li><a href="javascript:;">安踏</a></li>
                        <li><a href="javascript:;">奥康</a></li>
                        <li><a href="javascript:;">骆驼</a></li>
                        <li><a href="javascript:;">特步</a></li>
                    </ul>
                </div>
                <div class="category-item">
                    <h3 class="title">女装</h3>
                    <ul>
                        <li><a href="javascript:;">呢大衣</a></li>
                        <li><a href="javascript:;">T恤</a></li>
                        <li><a href="javascript:;">羽绒</a></li>
                        <li><a href="javascript:;">衬衫</a></li>
                        <li><a href="javascript:;">羊绒衫</a></li>
                        <li><a href="javascript:;">针织</a></li>
                        <li><a href="javascript:;">连衣裙</a></li>
                        <li><a href="javascript:;">皮外套</a></li>
                    </ul>
                </div>
                <div class="category-item">
                    <h3 class="title">男装</h3>
                    <ul>
                        <li><a href="javascript:;">衬衫</a></li>
                        <li><a href="javascript:;">T恤衫</a></li>
                        <li><a href="javascript:;">夹克</a></li>
                        <li><a href="javascript:;">大皮衣</a></li>
                        <li><a href="javascript:;">风衣</a></li>
                        <li><a href="javascript:;">牛仔裤</a></li>
                        <li><a href="javascript:;">西服</a></li>
                        <li><a href="javascript:;">卫衣</a></li>
                    </ul>
                </div>
                <div class="category-item">
                    <h3 class="title">鞋包配饰</h3>
                    <ul>
                        <li><a href="javascript:;">围巾</a></li>
                        <li><a href="javascript:;">旅行箱</a></li>
                        <li><a href="javascript:;">真皮包</a></li>
                        <li><a href="javascript:;">韩版</a></li>
                        <li><a href="javascript:;">达芙妮</a></li>
                        <li><a href="javascript:;">单肩包</a></li>
                        <li><a href="javascript:;">毛线</a></li>
                        <li><a href="javascript:;">清仓靴子</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- product-->
        <div id="product-info">
            <!-- preview-wrap -->
            <div id="preview-wrap">
                <div class="preview">
                    <img src="./images/pro_img/blue_one_big.jpg" alt=""/>
                </div>
                <p class="look-pic">
                    <img src="./images/look.gif" alt=""/>
                </p>
                <div class="spec-list">
                    <ul>
                        <li><a href="javascript:;" data-src=""><img src="./images/pro_img/blue_one.jpg" alt="" /></a></li>
                        <li><a href="javascript:;"><img src="./images/pro_img/blue_two.jpg" alt="" /></a></li>
                        <li><a href="javascript:;"><img src="./images/pro_img/blue_three.jpg" alt="" /></a></li>
                    </ul>
                </div>
                <div class="intro-tab">
                    <ul class="tab-head">
                        <li class="nav-item active">产品属性</li>
                        <li class="nav-item">产品尺码表</li>
                        <li class="nav-item">产品介绍</li>
                    </ul>
                    <div class="tab-content">
                       <div class="content-item active">沿用风靡百年的经典全棉牛津纺面料，通过领先的液氨整理技术，使面料的抗皱性能更上一层。延续简约、舒适、健康设计理念，特推出免烫、易打理的精细免烫牛津纺长袖衬衫系列。</div>
                       <div class="content-item">来自新疆无污染的生态棉花，采用紧密纺精梳棉纱，单经双纬的织造组织，造就了颗粒饱满、朴实无华、温润细腻的经典牛津纺，易洗快干、手感丰软、吸湿性好。设计师遵循布料完美肌理，立体剪裁，曲摆的现代人性化裁减，相得益彰，浑然天成。</div>
                       <div class="content-item">世界权威德国科德宝的衬和英国高士缝纫线使成衣领型自然舒展、永不变形，缝线部位平服工整、牢固耐磨；人性化的4片式后背打褶结构设计提供更舒适的活动空间；领尖扣的领型设计戴或不戴领带风格炯同、瞬间呈现；醇正天然设计，只为彰显自然荣耀。</div>
                    </div>
                </div>
            </div>
            <!-- product-detail -->
            <div id="pro-detail">
                <h3 class="title">免烫高支棉条纹衬衣</h3>
                <div class="pro-intro">全新精品高支棉衬衫再次提升品质，精选100%新疆长绒棉织造而成，平整度好，短绒少； 80-100高支双股经纬交织，带来无与伦比的舒适享受；而且面料反光效果好，具有漂亮的光泽，质感上佳，有利于免烫效果的维持！</div>
                <div class="price-w">
                    <span>价&nbsp;&nbsp;格:</span>
                    <span id="price" class="price">379.00</span>元
                </div>
                <div class="discount">
                    <span>促&nbsp;&nbsp;销:</span>
                    <span id="new_price" class="new-price">200.00</span>
                    <span>元</span>
                </div>
                <div class="color">
                    <span>颜&nbsp;&nbsp;色:</span>
                    <span id="colorTxt">蓝白</span>
                    <ul class="color-list">
                        <li class="color-item" data-color="蓝白"><img class="active" src="./images/pro_img/blue.jpg" alt="" /></li>
                        <li class="color-item" data-color="黄白"><img src="./images/pro_img/green.jpg" alt="" /></li>
                        <li class="color-item" data-color="粉绿"><img src="./images/pro_img/yellow.jpg" alt="" /></li>
                    </ul>
                </div>
                <div class="size">
                    <span>尺&nbsp;&nbsp;寸:</span>
                    <span id="sizeTxt">未选择</span>
                    <ul class="size-list">
                        <li class="size-item">S</li>
                        <li class="size-item">L</li>
                        <li class="size-item">SL</li>
                        <li class="size-item">LL</li>
                    </ul>
                </div>
                <div class="count">
                    <span>数&nbsp;&nbsp;量:</span>
                    <div class="count-sel">
                        <select >
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                    </div>
                </div>
                <div class="total">
                    <span>总&nbsp;&nbsp;计:</span>
                    <span id="totalPrice">200</span>元
                </div>
                <div class="ratings">
                    <span>给商品评分: </span>
                    <ul class="star-list">
                        <li title="1分" class="star-item"></li>
                        <li title="2分" class="star-item"></li>
                        <li title="3分" class="star-item"></li>
                        <li title="4分" class="star-item"></li>
                        <li title="5分" class="star-item"></li>
                    </ul>
                </div>
                <div class="shop-cart">
                    <a href="javascript:;" id="add_cart">
                        <img src="./images/btn_cart.png" alt="放入购物车" />
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- footer -->
    <div id="footer">
        Copyright © 2009 - 2012 JaneShop Inc.
    </div>
</div>

<!-- modal-mask -->
<div id="modal-mask">
    <div class="inner">
        <div class="big-pic">
            <img src="./images/pro_img/blue_one_big.jpg" alt="" />
        </div>
        <div class="pic-intro">
            <span class="txt">介绍文字</span>
            <span class="tip">close or Esc Key</span>
        </div>
    </div>
</div>

<!-- modal-mask-cart -->
<div id="modal-mask-cart">s
    <div class="inner">
        <div class="tip">
            <h3>提示</h3>
            <span class="close"></span>
        </div>
        <span class="ok"></span>
        <div class="buy-info">
            <h3>感谢您的购买。</h3>
            <p>您购买的产品是：免烫高支棉条纹衬衣；尺寸是：未选择；颜色是：蓝白；数量是：1；总价是：200元。</p>
        </div>
        <button class="close">关闭</button>
    </div>
</div>

</body>
</html>
